<template>
  <d2-container>
    <div class="aboutus-wrap" :style="{ backgroundImage: bgImg }">
      <div class="page-middle" v-if="!startClone">
        <div class="page-middle-content">
          <div>
            <div class="page-middle-title">{{ title }}</div>
            <div v-html="str"></div>
          </div>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import { computed, watch } from "vue";
import { request } from "@/api/_service.js";
import util from "@/libs/util.js";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("d2admin/user", ["info"]),
  },
  data() {
    return {
      str: "",
      bgImg: computed(() => {
        return `url(${process.env.VUE_APP_IMAGE}image/common/bg.jpg)`;
      }),
    };
  },

  mounted() {
    request({
      url: "/mapi/index/getCommonIntro",
      method: "post",
      data: {
        text: "about",
      },
    }).then((ret) => {
      console.log(ret, "requestrequest");

      this.str = ret.data.value;
      this.title = ret.data.remark;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.aboutus-wrap {
  color: #fff;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 28px;
  box-sizing: border-box;

  .page-middle {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 14px 0px;
    height: calc(100% - 20px);

    .page-middle-content {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      padding: 90px 60px;

      & > div {
        height: 100%;
        overflow: auto;
        .page-middle-title {
          font-size: 30px;
          color: #ffffff;
          line-height: 42px;
          margin-bottom: 26px;
        }
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 19px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(
            157deg,
            rgba(9, 5, 33, 0.7) 0%,
            rgba(16, 9, 52, 0.9) 100%
          ),
          linear-gradient(180deg, rgba(82, 41, 169, 1), rgba(30, 17, 101, 1));
        backdrop-filter: blur(10px);
        z-index: -1;
        opacity: 0.8;
      }

      .right-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 127px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        img {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
        span {
          font-size: 14px;
          color: #ffffff;
          line-height: 20px;
          margin-left: 10px;
        }
      }
      .middle-top {
        display: flex;
        align-items: center;
        margin-bottom: 32px;
        img {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 18px;
        }
        & > div {
          font-size: 14px;
          line-height: 21px;
          span {
            font-size: 18px;
            color: #ffffff;
            line-height: 27px;
          }
        }
      }
      .middle-tabs {
        height: calc(100% - 104px);
        overflow: auto;
        ::v-deep(.el-tabs__header) {
          .el-tabs__item {
            font-size: 16px;
            color: #fff;
            line-height: 25px;
            &:hover,
            &.is-active {
              color: #e540e8;
            }
          }
          .el-tabs__nav-wrap::after {
            background-color: rgba(255, 255, 255, 0.6);
            height: 1px;
          }
          .el-tabs__active-bar {
            bottom: 2px;
            height: 7px;
            background: #e540e8;
            border-radius: 4px 4px 0px 0px;
          }
        }
        ::v-deep(.el-tabs__content) {
          height: calc(100% - 55px);
          .el-tab-pane {
            height: 100%;
            & > div {
              height: 100%;
              .el-table {
                height: calc(100% - 42px);
                overflow: auto;
              }
              .pagination-wrap {
                display: flex;
                padding-top: 12px;
                justify-content: flex-end;
              }
            }
          }
        }
      }
      .page-item-left-btn {
        font-size: 18px;
        min-width: 200px;
        height: 48px;
        line-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 27px;
        border: 2px solid transparent;
        background: transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
          linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));
        img {
          width: 22px;
          height: 17px;
          margin-right: 5px;
        }
        &:hover {
          background-image: linear-gradient(131deg, #823ad7 0%, #823ad7 100%),
            linear-gradient(131deg, #823ad7 0%, #823ad7 100%);
        }
        &.cancel {
          background: #541d89;
          &:hover {
            background: #6f2cad;
          }
        }
      }

      .middle-chars-list {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        padding: 40px 0 0;
        & > div {
          width: calc(100% / 3 - 16px);
          height: 248px;
          border-radius: 24px;
          padding: 51px 25px 36px;
          border: 1px solid transparent;
          background: transparent;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: linear-gradient(157deg, #0f0f35 0%, #180f48 100%),
            linear-gradient(167deg, rgba(27, 27, 99, 1), rgba(47, 32, 136, 1));
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          overflow: hidden;
          .rose-bg {
            position: absolute;
            right: 0;
            top: -50%;
            width: 61%;
            opacity: 0.4;
            z-index: 0;
          }
          .chars-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .chars-top-left {
              font-size: 38px;
              color: #e540e8;
              line-height: 52px;
              display: flex;
              align-items: center;
            }
            .chars-top-right {
              font-size: 38px;
              span {
                font-size: 25px;
              }
              // display: flex;
              // align-items: center;
            }
          }
        }
      }
    }
  }
}

::v-deep(.paymoney-dialog) {
  background: transparent;
  .el-dialog__body {
    color: #fff;
    padding: 0;
    font-size: 18px;
    line-height: 25px;
    height: 350px;
    .paymoney-content {
      position: relative;
      height: 100%;
      padding: 32px 43px 36px;
      & > img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
      }
      .paymoney-content-top {
        font-size: 34px;
        line-height: 47px;
        margin-bottom: 29px;
      }

      .paymoney-content-center {
        display: flex;
        .paymoney-content-left {
          & > img {
            border-radius: 9px;
          }
          .paymoney-content-tab {
            margin-top: 14px;
            width: 155px;
            height: 37px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            display: flex;
            position: relative;
            transition: left 0.3s;
            &::before {
              content: "";
              position: absolute;
              height: 100%;
              width: 50%;
              left: 0;
              top: 0;
              z-index: -1;
              background: #fff;
              border-radius: 8px;
            }
            &.active20 {
              &::before {
                left: 0;
                transition: left 0.3s;
              }
              & > :first-child {
                color: #000;
              }
            }
            &.active10 {
              &::before {
                left: 50%;
                transition: left 0.3s;
              }
              & > :last-child {
                color: #000;
              }
            }
            div {
              cursor: pointer;
              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              color: #fff;
              img {
                margin-right: 2px;
              }
            }
          }
        }
        .paymoney-content-right {
          padding-left: 33px;
          & > div {
            font-size: 20px;
            line-height: 27px;
            margin-bottom: 26px;
            margin-top: -18px;
            span {
              font-size: 41px;
              line-height: 58px;
              padding: 0 6px;
            }
          }
          p {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 22px;
            margin: 0 0 4px;
            span {
              cursor: pointer;
              color: rgba(229, 64, 232, 1);
            }
          }
        }
      }
    }
  }
  .el-dialog__headerbtn {
    top: -20px;
    right: -40px;
    .el-icon-close {
      color: #fff;
      font-size: 42px;
    }
  }
}

::v-deep(.aboutus-dialog) {
  background: transparent;
  .el-dialog__body {
    color: #fff;
    padding: 40px 30px;
    min-height: 260px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(
        203deg,
        RGBA(24, 49, 117, 0.9) 0%,
        RGBA(16, 13, 52, 0.9) 30%,
        RGBA(16, 13, 52, 0.9) 70%,
        RGBA(65, 18, 102, 0.9) 100%
      ),
      linear-gradient(167deg, rgba(55, 55, 255, 1), rgba(39, 176, 255, 1));
    font-size: 18px;
    line-height: 25px;
    & > div {
      & > div {
        max-height: 300px;
        overflow: auto;
      }

      & > p {
        margin: 0;
        text-align: center;
        font-size: 28px;
        line-height: 38px;
      }
    }
  }
  .el-dialog__headerbtn {
    top: -20px;
    right: -40px;
    .el-icon-close {
      color: #fff;
      font-size: 42px;
    }
  }
}
</style>
